<template>
  <div class="TableEditBox">
    <div class="tableBox">
      <el-table
        :data="tbody"
        style="width: 100%"
        default-expand-all
        ref="table"
        size="medium"
        :key="tableKey"
        fit
        border
        lazy
        :cell-class-name="indexClassName"
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
          fixed="left"
        >
          <template #header>
            <b>序号</b>
          </template>
          <template #default="scope" >
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <template v-for="item in thead">
          <row-cell
            :data="item"
          >
            <template #[item.prop]="{scope}" v-if="$scopedSlots[item.prop]">
              <slot :name="item.prop" :scope="scope"></slot>
            </template>
          </row-cell>
        </template>
        <el-table-column
          label="操作"
          :width="100"
          align="center"
          fixed="right"
          v-if="isEdit"
        >
          <template #header>
            <b>操作</b>
          </template>
          <template #default="scope">
            <div class="operateButton">
              <el-tooltip  effect="dark" content="复制" placement="top">
                <div class="textBtn" @click="copyBtn(scope)">
                  <i class="iconfont icon-fuzhi"></i>
                </div>
              </el-tooltip>
              <el-tooltip  effect="dark" content="删除" placement="top">
                <div class="textBtn" @click="deleteBtn(scope)">
                  <i class="iconfont icon-shanchu"></i>
                </div>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bd" v-if="isEdit">
      <el-button class="wAuto" size="medium" @click="addBtn">
        <i class="iconfont el-icon-plus"></i>
        <p>添加明细</p>
      </el-button>
    </div>
  </div>
</template>
<script>
import FlexListBox from "@/comModule/FlexListBox";
import TableBox from "@/comModule/TableBox/index";
import RowCellItem from "@/comModule/TableBox/RowCellItem";
import FormBox from "@/comModule/FormBox";
import PopoverBox from "@/comModule/PopoverBox";
import RowCell from "@/comModule/TableBox/RowCell";
export default {
  name: "TableEditBox",
  props: {
    thead: {
      type: Array,
    },
    tbody: {
      type: Array,
    },
    isEdit:{
      type:Boolean,
    },
  }, // 获取父组件数据
  components: {
    RowCell,
    PopoverBox,
    FormBox,
    RowCellItem,
    TableBox,
    FlexListBox

  },
  created() {
    this.thead.forEach(item=>{
      this.addObj[item.prop]=''
    })
  },
  data() {
    return {
      addObj:{},
      tableKey:true,
    };
  },
  methods: {
    //添加样式
    indexClassName({column, columnIndex}) {
      if (columnIndex === 0) {
        return 'indexBg'
      }
    },
    //添加数据
    addBtn() {
      this.tbody.push(this.addObj)
      this.refreshTable()
    },
    //删除数据
    deleteBtn(scope) {
      this.tbody.splice(scope.$index,1)
      this.refreshTable()
    },
    //复制数据
    copyBtn(scope) {
      let obj=JSON.parse(JSON.stringify(scope.row))
      this.tbody.splice(scope.$index,0,obj)
      this.refreshTable()
    },
    //重新渲染表格
    refreshTable(){
      this.tableKey=!this.tableKey
    },
  },
  computed: {

  }
};
</script>
<style lang="scss" scoped>
.TableEditBox ::v-deep{
  >*{
    &:not(:last-child){
      margin-bottom: 8px;
    }
  }
  .tableBox {
    .indexBg {
      background: #f5f5f5 !important;
      color: #333;
    }
    .el-table {
      .el-table__header {
        .el-table__cell {
          background: #f5f5f5;
          font-weight: normal;
          color: #333;
        }
      }
      .el-table__row {
        &.primary {
          background: #ecf5ff;
        }
        &.success {
          background: #f0f9eb;
        }
        &.info {
          background: #f3f3f3;
          color: #999aaa;
        }
        &.warning {
          background: #fdf6ec;
        }
        &.danger {
          background: #ffeff0;
          color: #e13335;
        }
        &.current-row {
          background: #3f61f1;
          color: #fff;
          .el-table__cell {
            background: initial;
            .el-link {
              color: #fff;
              &:hover {
                color: #fff !important;
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
    .operateButton{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      >*{
        &:not(:last-child){
          margin-right: 8px;
        }
      }
      .textBtn{
        color: #3f61f1;
        display: flex;
        align-items: center;
        justify-content: center;
        width:26px;
        height:26px;
        border-radius: 4px;
        cursor: pointer;
        &:hover{
          background: #3f61f1;
          color: #fff;
        }
      }
    }
    .tableIndex{
      display: flex;
      align-items: center;
      justify-content: center;
      &:not(.not){
        .bd{
          display: none;
        }
        &:hover{
          .hd{
            display: none;
          }
          .bd{
            display: block;
          }
        }
      }
      &.not{
        .hd{
          display: none;
        }
        .bd{
          display: block;
        }
      }
    }
  }
}
</style>
